<template>
	<view class="main">
		<u-navbar :is-back="true" :autoBack="true" safeAreaInsetTop placeholder>
			<view slot="center" class="leftText">权限管理</view>
		</u-navbar>
		
		<view class="notList" v-if="listRow && listRow.length<1">
			<view>你可通过分享至微信，授权对方协助贵公司招聘</view>
			<button @click="empower=true">授权招工</button>
		</view>
		
		<view class="manage-lst v-box">
			<view class="mg-item v-box dis-clm" v-for="(item,index) in listRow" :key="index">
				<view class="mgitem-name poser">
					<view class="icon"><image :src="item.avatar?item.avatar:'http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/default-avatar.png'"></image></view>
					<view class="username">
						<view>{{item.realName}}</view>
						<view>{{item.userName}}</view>
					</view>
					<view class="btn">
						<view class="cancel" @click="">授权招工</view>
						<view class="del" @click="delUser(item)">删除</view>
					</view>
				</view>
			</view>
		</view>
		<view class="sendSq" v-if="listRow && listRow.length>0">
			<button @click="empower=true">授权招工</button>
		</view>
		<u-popup
			:show="empower" 
			:round="10" 
			customStyle="width:100%;" 
			mode="bottom" 
			:closeable="true" 
			@close="closeEmpower"
			>
			<view class="empower">
				<view class="title">授权用户</view>
				<input v-model="phone" placeholder="请输入被授权用户手机号码">
				<u-button type="primary" customStyle="background:#0575FF; font-size:32rpx; margin-bottom: 24rpx;" 
				text="确定" @click="empowerSub()"></u-button>
				<u-button type="info" customStyle="font-size:32rpx;" @click="closeEmpower()" text="取消"></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
import Index from "@/common/index-model.js"
let index = new Index()
let that = null	
export default {
	data() {
		return {
			listRow:[],
			empower:false,
			phone:'',
		}
	},
	methods: {
		closeEmpower(){
			this.empower=false;
		},
		empowerSub(){
			uni.showLoading({
				title: '绑定中,请稍后'
			});
			if(!index.is_phone_number(this.phone)){
				index.show_tips('请输入正确的被授权用户手机号码');return false;
			}
			index.getPublicUserMember({mobile:this.phone},'/client/recuitmember/invite','POST',res=>{
				if(res.data.code == 200 && res.data.success){
					index.show_tips(res.data.message);
					this.getRowList();
					this.empower=false;
				}else{
					index.show_tips(res.data.message);
				}
			})
		},
		delUser(item){
			index.getPublicUserMember({targetId:item.id},'/client/recuitmember/remove','POST',res=>{
				if(res.data.code == 200 && res.data.success){
					index.show_tips('删除成功');
					this.getRowList();
				}else{
					index.show_tips(res.data.message);
				}
			})
		},
		getRowList() {
			index.getPublicUserMember({},'/client/recuitmember/list','get',res=>{
				if(res.data.code == 200 && res.data.success){
					this.listRow = res.data.result
				}else{
					this.listRow = []
				}
			})
		},
		//修改状态
		updateStatus(send){
			index.getPublicUserMember(send,'client/individual/update/setting','post',res=>{
				if(res.data.code == 200 && res.data.success){
					setTimeout(()=>{
						this.getRowList()
					},400)
				}else{
					index.show_tips(res.data.message)
					return false
				}
			})
		}
	},
	onLoad() {
		this.getRowList()
	}
}		
</script>
<style lang="scss" scoped>
::v-deep {
  .u-navbar--fixed {	  
	  background-size: 100%;
	  background-image: url('http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/gb3.png');
	  background-repeat: no-repeat;
    // background-image: linear-gradient(to bottom, #42cdff, #0288ff);
    & > view {
      background: transparent !important;
    }
    .leftText {
      color: #0F0F0F;
	  text-align: center;
	  font-size: 36rpx;
	  font-weight: bold;
    }
  }
}
.main{
	background-size: 100%;
	background-image: url('http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/gb3.png');
	background-repeat: no-repeat;
}
.notList{ margin-top: 200rpx; color: #3D3D3D; text-align: center; padding: 0 20rpx;}
.notList button{ background: #0575FF; height: 80rpx; line-height: 80rpx; text-align: center; 
color: #fff; font-size: 28rpx; margin-top: 68rpx;}


.sendSq{ position: fixed; margin-bottom: 20rpx; padding: 0 20rpx; width: calc(100% - 40rpx); bottom: 0;}
.sendSq button{ background: #0575FF; width: 100%; height: 80rpx; line-height: 80rpx; text-align: center; 
color: #fff; font-size: 28rpx; margin-top: 68rpx;}

.empower{ padding: 20rpx;}
.empower .title{ color:#0F0F0F; font-size: 28rpx; margin-top: 50rpx;}
.empower input{ height: 88rpx; line-height: 88rpx; border: 1px solid #D0D5DD; margin-bottom: 48rpx; border-radius: 16rpx; padding: 0 10rpx;}

.manage-lst{ padding: 20rpx 20rpx;}
.manage-lst .mg-item{ border-bottom: 1rpx solid #F0F0F0;}
.manage-lst .mg-item .mgitem-name{ display: flex; flex-wrap: wrap;}
.manage-lst .mg-item .mgitem-name .icon{ width: 104rpx; height: 104rpx; margin-right: 16rpx;}
.manage-lst .mg-item .mgitem-name .icon image{ width: 100%; height: 100%; border-radius: 6rpx;}
.manage-lst .mg-item .mgitem-name .username view:nth-child(1){ font-size: 36rpx; line-height: 43rpx; font-weight: bold; color: #0F0F0F;}
.manage-lst .mg-item .mgitem-name .username view:nth-child(2){ font-size: 24rpx; line-height: 29rpx; margin-top: 30rpx; color: #0F0F0F;}
.manage-lst .mg-item .mgitem-name .btn{ text-align: right; flex: 1;}
.manage-lst .mg-item .mgitem-name .btn view{ float: right; padding: 0rpx 24rpx; height: 80rpx; line-height: 80rpx;}
.manage-lst .mg-item .mgitem-name .btn view.del{ border: 1px solid #FF5964; border-radius: 80rpx; color: #FF5964; margin-right: 20rpx;}
.manage-lst .mg-item .mgitem-name .btn view.cancel{ background: #FF5964; color: #fff; border-radius: 80rpx;}




</style>
<style>
@import url("@/static/css/publics.css");	
</style>